<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>管理用户</title>
</head>
<style>


    body{
        text-align:center;
        margin-left:auto;
        margin-right:auto;
    }
    table{
        border-collapse:collapse; /*表示将单元格中各小格之间的空隙进行合并*/
        border:1px olivedrab solid; /*定义边框样式*/
        text-align:center;
        margin-left:auto;
        margin-right:auto;

    }
    .container {
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto
    }

    @media ( min-width :768px) {
        .container {
            width: 750px
        }
    }

    @media ( min-width :992px) {
        .container {
            width: 970px
        }
    }

    @media ( min-width :1200px) {
        .container {
            width: 1170px
        }
    }

    .row {
        margin-right: -15px;
        margin-left: -15px
    }

    .form-group-lg
    {
        width: 46px;
        height: 46px;
        line-height: 46px
    }

    .input-group-sm
    {
        width: 30px;
        height: 30px;
        line-height: 30px
    }

    .form-group-lg select {
        height: 46px;
        line-height: 46px
    }

    .form-group-lg select[multiple], .form-group-lg textarea
    {
        height: auto
    }


    .form-group-sm select {
        height: 30px;
        line-height: 30px
    }

    .form-group-sm select[multiple], .form-group-sm textarea
    {
        height: auto
    }

    .form-group-sm  {
        height: 30px;
        min-height: 32px;
        padding: 6px 10px;
        font-size: 12px;
        line-height: 1.5
    }
    .button {
        position: center;
        text-align:center;
        background-color: coral;
        color: white;
        border-color: chocolate;
        border-bottom-color: chocolate;
        border-right-color: chocolate;
        border-radius:7px;//按钮圆角锐化

    }
    .button span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s;
    }

    .button span:after {
        content: '»';
        position: absolute;
        opacity: 0;
        top: 0;
        right: -20px;
        transition: 0.5s;
    }

    .button:hover span {
        padding-right: 10px;
    }

    .button:hover span:after {
        opacity: 1;
        right: 0;
    }
    .button1{
        position: center;
        text-align:center;
        background-color: #76b6ff;
        color: white;
        border-color: #76b6ff;
        border-bottom-color: #76b6ff;
        border-right-color: #76b6ff;
        border-radius:7px;//按钮圆角锐化
    }
    .css_table tr:hover{
        background-color: #a0bbcc;
        border-collapse: collapse;

    }

</style>
<body>

<div class="container">
    <div class="row">
        <font size="5"> 用户管理 </font><br/>
    </div>
    <div class="row">
        <div>
        <form th:action="@{getUser(userid=${userid},username=${username})}">
            <a th:href="@{add}">  <button class="button"><span>添加用户</span></button></a>
            <label>输入用户ID：<input type="text" placeholder="请输入id关键字进行搜索" class="seach" name="userid" id="userid"/></label>
            <label>用户名：<input type="text" placeholder="请输入用戶名关键字进行搜索" class="seach" name="username" id="username"/></label>
            <button type="submit"  class="button"><span>查找用戶</span></button>
        </form>

     </div>
        <table  class="table css_table" border="1" >
            <tr>
                <th></th>
                <th>用户ID</th>
                <th>用户姓名</th>
                <th>用户密码</th>
                <th>管理员级别</th>
                <th>性别</th>
                <th>用户号码</th>
                <th>用户住址</th>
                <th>黑名单</th>
                <th>邮箱</th>
                <th>操作</th>
            </tr>
            <tr th:each="user : ${pageInfo.list}" >
                <td><label>
                    <input type="checkbox" name="userid" th:value="${user.userid}">

                </label></td>
                <td >[[${user.userid}]]</td>
<!--                <td th:text="${user.userid}"></td>-->
                <td th:text="${user.username}"></td>
                <td th:text="${user.password}"></td>
                <td th:text="${user.role}"></td>
                <td th:text="${user.usersex}"></td>
                <td th:text="${user.userphone}"></td>
                <td th:text="${user.useraddress}"></td>
                <td th:text="${user.blacklist}"></td>
                <td th:text="${user.email}"></td>
                <td>
                    <a th:href="@{deleteUser(userid=${user.userid})}" ><button class="button"style="cursor: pointer"/><span>刪除</span></button></a>
                    <a th:href="@{update(userid=${user.userid})}"> <button class="button" style="cursor: pointer"/><span>修改</span></button></a>
                </td>
            </tr>
        </table>

        <p>
            当前 <span th:text="${pageInfo.pageNum}"></span> 页,
            总 <span th:text="${pageInfo.pages}"></span> 页,
            共<span th:text="${pageInfo.total}"></span> 条记录
        </p>

        <div >
            <br>
            <a th:href="@{viewUser}"><button class="button1" style="cursor: pointer">首页</button></a>
            <a th:href="@{viewUser(pageNum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}"> <button class="button1" style="cursor: pointer">上一页</button></a>
            <a th:href="@{viewUser(pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}"><button class="button1" style="cursor: pointer">下一页</button></a>
            <a th:href="@{viewUser(pageNum=${pageInfo.pages})}"><button class="button1" style="cursor: pointer">末页</button ></a>
            <br>
        </div>
    </div>

</div>

</body>

</html>